<{include file="Common/head"}>
<{include file="Common/menu" }>

<link href="_index_/yy/laydate.css" rel="stylesheet">
<script src="_index_/yy/laydate.js"></script>
<script type="text/javascript" src="_index_/laydate/laydate.js"></script>
<script type="text/javascript" src="_index_/yy/vue.min.js"></script>
<script type="text/javascript" src="_index_/yy/element.js"></script>
<link rel="stylesheet" href="_index_/yy/element.css" type="text/css">

<style type="text/css">
    *{font-size: 15px!important;}
    .Hui-article-box{margin-left: 5px!important;margin-right: 5px!important;}
    #mytable td{text-align: center}

    .select_date{  width: 20%;  float: left;  }
    .search_tiaojian{
        width:40%;
        /*margin-left: 30px;*/
        float: left
    }
    .order_con{     width: 100%;
        /* height: 250px; */
        margin-bottom: 25px;
        background: #c2ccd1;
        float: left;
        margin-top: 10px;
        padding-bottom: 20px;}
    .order_con h4{margin-top:0!important;}
    .display{display: none;}
    .order_table{}
    .order_table .check-box label{display: block;margin-top:3px;}
    .sub_order{position: relative;  top: 10px;  left: 20px;}
    #tab_demo{width: 100%;display: block;float: left;}
    .colorred{color:red;}
    .device_w{width:30%;height: 30px;}
    table.paibantable tr td{font-size: 18px;}
    #my_table{
        width: 100%;
        max-height: 100%;
        overflow: auto;
        float: left;
        margin-top: 20px;
        display: flex;
        flex-flow: column;
        align-items: center;
    }
    .yuyue-title{
        font-size: 20px!important;
        text-align:center;
        font-weight: bold;
    }
    .table_box {
        width: 95%;
    }
    .w1 {
        width: 190px;
    }
    .w2 {
        width: 100px;
    }
    .w3 {
        width: 60px;
    }
    .w4 {
        width: 25px;
    }
    .w5 {
        width: fit-content;
    }
    .table_box td {
        padding: 12px 0px;
    }
    .table_box tr {
        border-bottom: 1px solid #ebeef5;
    }
    .moblie_box {
        width: 100%;
        max-height: 100%;
        overflow: auto;
        float: left;
        margin-top: 20px;
        display: flex;
        flex-flow: column;
        align-items: center;
    }
    .moblie_box_ul {
        width: 100%;
        display: flex;
        flex-flow: wrap;
        border-bottom: 1px solid #ebeef5;
        padding: 10px 0px;
    }

</style>

<section class="Hui-article-box">
    <div class="yuyue-title">取消订单情况</div>
    <div class="text-c search_tiaojian">
        <form action="/index/Index/DeleteData" method="post">
        查询条件：
        <input type="text" id="logmin" name="logmin" autocomplete="off" value="<?php echo isset($search_data['logmin'])?$search_data['logmin']:''; ?>" class="input-text Wdate" style="width:120px;">
        -
        <input type="text" id="logmax" name="logmax" autocomplete="off" value="<?php echo isset($search_data['logmax'])?$search_data['logmax']:''; ?>" class="input-text Wdate" style="width:120px;">
        <button name="" id="search_bt" class="btn btn-success" type="submit" style="margin-bottom: 8px;margin-top: 8px;"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
        </form>
    </div>
    <div id="my_table">
        <table class="table_box" v-if="shows">
            <{volist name="data" id="vo"}>
            <tr>
                <td class="w1"><{$vo.riqi1}></td>
                <td class="w2"><{$vo.uname}></td>
                <td class="w3">取消了</td>
                <td class="w1"><{$vo.riqi2}></td>
                <td class="w2"><{$vo.name}></td>
                <td class="w4">的</td>
                <td class="w5"><{$vo.buwei}></td>
            </tr>
            <{/volist}>
        </table>
        <div class="moblie_box" v-else>
            <{volist name="data" id="vo"}>
            <ul class="moblie_box_ul">
                <li class="moblie_box_li ww1"><{$vo.riqi1}></li>
                <li class="moblie_box_li ww2"><{$vo.uname}></li>
                <li class="moblie_box_li ww3">取消了</li>
                <li class="moblie_box_li ww1"><{$vo.riqi2}></li>
                <li class="moblie_box_li ww2"><{$vo.name}></li>
                <li class="moblie_box_li ww3">的</li>
                <li class="moblie_box_li ww4"><{$vo.buwei}></li>
            </ul>
            <{/volist}>
        </div>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#my_table',
        data: function() {
            return {
                shows: false
            }
        },
        methods: {
        },
        created() {
            const ua = navigator.userAgent.toLowerCase();
            const t1 = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(ua);
            const t2 = !ua.match("iphone") && navigator.maxTouchPoints > 1;
            if (t1 || t2) {
                this.shows = false
            } else {
                this.shows = true
            }
        },
        mounted() {
        }
    })

    window.onload = function(){
        var tableCont = document.querySelector('#my_table');
        function scrollHandle (e){
            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }
        tableCont.addEventListener('scroll',scrollHandle);
    };
    setTimeout('set_date()',500);

    function set_date(){
        console.log($("#laydateInputs").val());
        $("#order_date").attr("value",$("#laydateInputs").val());
    }
    window.onresize = function () {
        // const ua = navigator.userAgent.toLowerCase();
        // const t1 = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(ua);
        // const t2 = !ua.match("iphone") && navigator.maxTouchPoints > 1;
        // if (t1 || t2) {

        // } else {
        //     if (document.body.clientWidth > 999) {
        //         location.reload()
        //     }
        // }
    }

    $(function(){
        $('.device_status input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        //多条件排序、仪器情况、排班表 切换
        $("#tab_demo").Huitab({ "tabBar":".tabBar span", "tabCon": ".tabCon", "className": "current", "tabEvent": "click", "index": 0 });

        //js限制必须要选择排序条件才能点击按钮
        $(".sub_order").on("click",function(){
            if($("input[name='order_item']").is(':checked')||$("input[name='order_id']").is(':checked')||$("input[name='order_name']").is(':checked')){
                $("#order_from").submit();
            }else{
                $.Huimodalalert('必须勾选排序条件！',2000)
            }
        });

        /*
        //通过url获取date参数
        var str=location.href;

        urldata = str.split("?");

        if(str.indexOf("?")==-1){
            //表示没有问号，即今天的数据
        }else{
            date = urldata[1];
            riqi = date.split("=")[1];
            $("#order_date").attr("value",riqi);
        }
        */

        //排序checkbox的选中状态
        $('.order_table .check-box input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });


        //常规用法
        laydate.render({
            elem: '#laydateInputs' ,
            done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                //window.location.href="/index/Index/listdata?date="+value;
                window.location.href="/index/Index/search_gk?logmin="+value;
                $("#laydateInput").val(value);

            }
        });

        laydate.render({
            elem: '#logmin' ,
            done: function(value, date, endDate){
                //console.log(value); //得到日期生成的值，如：2017-08-18
            // window.location.href="/index/Index/listdata?riqi="+value;
                //$("#laydateInput").val(value);
            }
        });
        laydate.render({
            elem: '#logmax' ,
            done: function(value, date, endDate){
                //console.log(value); //得到日期生成的值，如：2017-08-18
                // window.location.href="/index/Index/listdata?riqi="+value;
                //$("#laydateInput").val(value);
            }
        });

        function strToJson(str){
            return JSON.parse(str);
        }

        function formatDateTime(timeStamp) {
            var date = new Date();
            date.setTime(timeStamp * 1000);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            //return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
            return y + '-' + m + '-' + d;
        }

        $("#mytable").tablesorter();

        $('#mytable thead').on( 'click', 'tr', function () {
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });

        riqi = getQueryVariable("date");
        if(riqi){
            $("#laydateInputs").val(decodeURI(getQueryVariable("date")));
        }else{
            $("#laydateInputs").val(getNowFormatDate());
        }
    });

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
</script>
<{include file="Common/footer"}>